<template>
	<view class="ocrImgContainer">
		<!-- 摄像头组件 -->
		<view class="cameraBls">
			<camera id="myCamera" :device-position="devicePosition" :style="styleType[styleTypeIndex]">
			</camera>
			<!-- <view class="mos" :style="styleType[styleTypeIndex]">我是蒙层</view> -->
		</view>
		<!-- 识别结果 -->
		<view class="title">识别结果：{{ocrData ? ocrData : '无'}}</view>
		<!-- 按钮 -->
		<view class="bot">
			<u-button type="primary" text="识别" @click="pic"></u-button>
		</view>
	</view>
</template>

<script>
	let cameraContext = null;
	export default {
		data() {
			return {
				devicePosition: 'back',
				imgUrl: '',
				styleType: ['width: 300px;height: 300px;', 'width: 100%;height: 400px;'],
				styleTypeIndex: 1,
				ocrData: ''
			};
		},
		onReady() {
			cameraContext = wx.createCameraContext();
		},
		methods: {
			overturn() {
				this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
			},
			pic() {
				cameraContext.takePhoto({
					quality: "high",
					success: (res) => {
						uni.showLoading({
							title: '识别中'
						})
						uni.uploadFile({
							url: 'https://photo.renyizhong.cn/api/ai/ocr',
							filePath: res.tempImagePath,
							name: 'ocrFile',
							success: (ress) => {
								const {
									result
								} = JSON.parse(ress.data)
								// 发送请求
								uni.request({
									url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/license_plate?access_token=24.39339af828d581bb6368a59c4ccb0aa6.2592000.1751773665.282335-119148249',
									method: 'POST',
									header: {
										'Content-Type': 'application/x-www-form-urlencoded',
										'Accept': 'application/json'
									},
									data: {
										url: result
									},
									success: (resss) => {
										if (resss.data.error_code) {
											uni.showToast({
												icon: 'none',
												title: '识别失败'
											})
											this.ocrData = '识别失败，请重试'
										} else {
											this.ocrData = resss.data.words_result
												.number
											uni.hideLoading()
										}
									}
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
				});
			}
		},
	}
</script>

<style lang="less" scoped>
	.ocrImgContainer {
		width: 100%;
		min-height: 100vh;
		padding: 24rpx;

		.cameraBls {
			position: relative;

			.mos {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .5);
				z-index: 999;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
			}
		}

		.bil {
			display: flex;

			.bliItem {
				width: 100rpx;
				height: 100rpx;
				background-color: #007AFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin: 0 20rpx;
			}
		}

		// 固定底部
		.bot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			z-index: 999;
			padding: 0 20rpx;
			padding-bottom: 60rpx;
		}
	}
</style>